<template>
  <div class="bodys">
    <div class="top">
      <div class="tobus">
        <search @getTreeData="testData"></search>
      </div>

      <div class="tabs">
        <van-tabs v-model="active" @change="weangs" animated>
          <van-tab
            v-for="(item, index) in list"
            :title="item.title"
            :key="index"
            :to="item.to"
          ></van-tab>
        </van-tabs>
      </div>

      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { Sticky } from "vant";
import tabs from "@/components/Tabs.vue";
import { Tab, Tabs } from "vant";
import { List } from "vant";
import orderformdata from "../components/orderform/zhujian.vue";
// import tabs from "@/components/Tabs.vue";
import search from "@/components/Search.vue";
export default {
  components: {
    orderformdata,
    tabs,
    search,
    [Tab.name]: Tab,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      active: this.$route.meta.active,
      mansda: [],
      TabTitle: [],
      show: true,
      list: [
        {
          title: "全部订单",
          to: "/orderForm/complete",
        },
        {
          title: "待付款",
          to: "/orderForm/obligation",
        },
        {
          title: "待发货",
          to: "/orderForm/deliver",
        },
        {
          title: "待收货",
          to: "/orderForm/take",
        },
        {
          title: "待评价",
          to: "/orderForm/evaluate",
        },
      ],
    };
  },
  watch: {
    $route: {
      handler(to) {
        console.log(to);
        this.active = this.$route.meta.active;
        if (
          to.name == "complete" ||
          to.name == "obligation" ||
          to.name == "deliver" ||
          to.name == "take" ||
          to.name == "evaluate"
        ) {
        }
      },
    },
  },
  created() {
    // this.simulation();
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.chatContent.scrollTop = 100;
      // this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
    });
  },
  activated() {
    // 通过页面下标来拿

    (this.active = this.$route.meta.active),
      localStorage.setItem("orderformindex", this.active);
    // console.log(this.$route.meta.Yaxis);
    // this.guanb();
  },
  deactivated() {
    window.removeEventListener("scroll", this.handleScroll);
  },

  watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      // console.log(to);
      // if (to.fullPath == "/orderform") {
      //   // console.log("789456123");
      //   this.guanb();
      // }
      // if (from.fullPath == "/orderform") {
      //   window.removeEventListener("scroll", this.handleScroll);
      //   // console.log("1234568");
      // }
    },
  },
  mounted() {},
  methods: {
    getScroll(e) {
      // console.log(e.target.scrollTop)
      this.$route.meta.Yaxis = e.target.scrollTop;
    },
    // handleScroll() {
    //   let scrollTop = window.pageYOffset;
    //
    //   console.log(  this.$route.meta.Yaxis)
    // },
    // guanb() {
    //   window.addEventListener("scroll", this.handleScroll);
    // },

    // 更新组件
    updateZhuJian() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
        this.$forceUpdate();
      });
    },
    testData() {
      this.$router.push("/my");
    },
    http() {
      //   console.log( this.$route.query.index)

      this.$get(API.GET_ORDER_LIST, {
        token: localStorage.getItem("token"),
        showType: this.active,
        // page:1,
      }).then((res) => {
        // this.suliang.push(res.data.list.length);
        this.mansda = res.data.list;
      });

      //  console.log(this.active);
    },
    weangs(e) {
      localStorage.setItem("orderformindex", e);
    },
  },
   beforeRouteLeave (to, from, next) {
     console.log(to)
     if(to.name!="orderdetails"){
         this.$route.meta.Yaxis=0
     }
      next()
    },
};
</script>

<style lang="less" scoped>
.bodys {
  height: 100%;
  // overflow: hidden;
  background-color: @background;

  .top {
    .tobus {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .van-tabs__nav {
      width: 100vw !important;
    }
    .mongto {
      // margin-top: 50px;
      height: 100vh;

      overflow-x: auto;
    }
    .tabs {
      width: 100%;
      position: fixed;
      top: 50px;
      left: 0;
      z-index: 100;
    }
  }
}
</style>